<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/jd.css"/>
    <link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
 
    <script type="text/javascript" src="js/jd.js"></script>
</head>
<body>
  <!--导航开始-->
    <div class="nav">
 
        <div class="warp">
            <ul class="nav_ul1">
                <li><a href=""><i class="iconfont">&#xf012b;</i> 京东首页</a></li>
                <li><a href="">配送到：北京</a></li>
            </ul>
 
            <ul class="nav_ul2">
                <li><a href="">洋洋宝贝</a><span>|</span></li>
                <li><a href="">我的订单</a><span>|</span></li>
                <li><a href="">我的京东</a><span>|</span></li>
                <li><a href="">京东会员</a><span>|</span></li>
                <li><a href="">企业采购</a><span>|</span></li>
                <li><a href="">京东手机</a><span>|</span></li>
                <li><a href="">关注京东</a><span>|</span></li>
                <li><a href="">客户服务</a><span>|</span></li>
                <li><a href="">网站导航</a></li>
            </ul>
        </div>
 
    </div>
  <!-- 导航结束   -->
 
  <!--搜索框开始-->
    <div class="search">
 
        <div class="warp">
<img src="images/logo.png" style="height: 80px; width: 80px;">
            <ul class="search_1">
                <li><a href="">购物车</a></li>
            </ul>
 
            <div class="search_div">
 
                <input type="text" class="search_text"/>
                <input type="button" value="搜索" class="search_but"/>
            </div>
        </div>
 
    </div>
  <!--搜索框结束-->
 
  <!--标题开始-->
  <div class="title warp">
      <h3>全部商品</h3>
 
      <div>
          <span>配送到</span>
 
          <select>
              <option>昌平区</option>
              <option>顺义区</option>
              <option>大兴区</option>
              <option>朝阳区</option>
              <option>海淀区</option>
              <option>石景山区</option>
              <option>东城区</option>
              <option>房山区</option>
              <option>通州区</option>
              <option>丰台区</option>
          </select>
 
      </div>
 
  </div>
  <!--标题结束-->
 
    <!--显示菜单的开始-->
    <div class="tips warp">
        <ul>
            <li>
                <input type="checkbox" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>
                全选
            </li>
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    </div>
    <!--显示菜单的结束-->
 
 
  <!--商品的详情展示开始-->
    <div class="info warp" data-product-id="1">
        <ul>
            <li class="info_1"><input type="checkbox" name="fav" class="product-checkbox" onclick="checkTest2()"/></li>
            <li class="info_2"><img src="images/1be4225d0eda715b.jpg.avif" width="100px"/></li>
            <li class="info_3">
                <a>海蒂极简系列9.5-10mm18K金淡水珍珠耳钉素耳饰女附证书七夕礼物</a>
            </li>
            <li class="info_4"><a>白色 9.5-10mm [日常百搭]</a></li>
            <li class="info_5"><a>￥439.00</a></li>
            <li class="info_6">
            <button class="but_1" onclick="checkTest3(this, -1, 1),checkTest2()">-</button>
            <input type="text" name="quantity" class="quantity" value="1" data-product-id="1" />
            <button class="but_2" onclick="checkTest3(this, 1, 1),checkTest2()">+</button>
            </li>
            <li class="info_7"><span class="totalPrice" data-product-id="1">￥439.00</span></li>
           <li class="info_8">
               <button class="but_3">
                    <a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">删除</a>
               </button><br />
               <button class="but_4">
                    <a>移入关注</a>
               </button>
            </li>
        </ul>
    </div>
 
   <div class="info warp" data-product-id="2">
        <ul>
            <li class="info_1"><input type="checkbox" name="fav" class="product-checkbox" onclick="checkTest2()" /></li>
            <li class="info_2"><img src="images/f52755f929a8a996.jpg.avif" width="100px"/></li>
            <li class="info_3">
                <a>小米 Redmi K70 全网通5G手机 16GB+1TB 墨羽 ZG</a>
            </li>
            <li class="info_4"><a>墨羽 16GB+1TB</a></li>
            <li class="info_5"><a>￥3129.0</a></li>
            <li class="info_6">
            <button class="but_1" onclick="checkTest3(this, -1, 2),checkTest2()">-</button>
            <input type="text" name="quantity" class="quantity" value="1" data-product-id="2" />
            <button class="but_2" onclick="checkTest3(this, 1, 2),checkTest2()">+</button>
            </li>
            <li class="info_7"><span class="totalPrice" data-product-id="2">￥3129.00</span></li>
            <li class="info_8">
                <button class="but_3">
                    <a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">删除</a>
                </button><br />
                <button class="but_4">
                    <a>移入关注</a>
                </button>
            </li>
        </ul>
    </div>
 
   <div class="info warp" data-product-id="3">
        <ul>
            <li class="info_1"><input type="checkbox" name="fav" class="product-checkbox" onclick="checkTest2()"/></li>
            <li class="info_2"><img src="images/2df2bb2a89d2bf3f.jpg.avif" width="100px"/></li>
            <li class="info_3">
                <a>小米摄像头C300双摄版高清无线摄像头监控家用室内智能摄像机手机远程监</a>
            </li>
            <li class="info_4"><a>【套餐一】小米摄像头+64G内存卡+吊装支架</a></li>
            <li class="info_5"><a>￥319.00</a></li>
              <li class="info_6">
            <button class="but_1" onclick="checkTest3(this, -1, 3),checkTest2()">-</button>
            <input type="text" name="quantity" class="quantity" value="1" data-product-id="3" />
            <button class="but_2" onclick="checkTest3(this, 1, 3),checkTest2()">+</button>
            </li>
            <li class="info_7"><span class="totalPrice" data-product-id="3">￥319.00</span></li>
            <li class="info_8">
                <button class="but_3">
                    <a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">删除</a>
                </button><br />
                <button class="but_4">
                    <a>移入关注</a>
                </button>
            </li>
 
        </ul>
    </div>
  <!--商品的详情展示结束-->
 
  <!--结算开始-->
  <div class="balance warp">
 
      <ul class="balance_ul1">
          <li>
              <input type="checkbox" name="fav" id="" value="" onclick="checkTest1(this),checkTest2()" />
              全选
          </li>
          <li><a>删除选中商品</a></li>
          <li><a>移入关注</a></li>
          <li><a>清理购物车</a></li>
      </ul>
 
      <ul class="balance_ul2">
          <li><a>已选择<span id="snum">1</span>件商品</a></li>
          <li><a>总价<span id="zongz">￥12</span></a></li>
<li>
    <button onclick="window.location.href='pay.html'" class="butt f10">去结算</button>
</li>
      </ul>
  </div>
  <!--结算结束-->
</body>
</html>